<template>
  <el-card
    shadow="hover"
    class="hover-bg-#3973a0 hover-translate--5px hover-text-#fff cursor-pointer py-5px pl-10px h-100px"
    @mouseenter="enter"
    @mouseleave="leave"
    @click="go_web"
  >
    <div class="flex flex-content-between flex-items-center">
      <div>
        <SvgIcon
          :name="name"
          width="54px"
          height="54px"
          :color="isHover ? hoverColor : color"
        />
      </div>
      <div>
        <p class="text-18px ml-10px">{{ title }}</p>
        <p class="text-13px ml-10px line-height-20px">{{ subTitle }}</p>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, defineProps } from "vue";
import { useRouter } from "vue-router";

const props = defineProps({
  name: {
    type: String,
    default: () => "zhinan",
  },
  title: {
    type: String,
    default: () => "指南",
  },
  subTitle: {
    type: String,
    default: () => "",
  },
  color: {
    type: String,
    default: () => "#ea9518",
  },
  hoverColor: {
    type: String,
    default: () => "#fff",
  },
  src: {
    type: String,
    default: () => "/",
  },
});

const $router = useRouter();
const isHover = ref(false);

const go_web = () => {
  if (props.src.startsWith("http")) {
    window.open(props.src, "_blank");
  } else {
    $router.push(props.src);
  }
};

const enter = () => {
  isHover.value = true;
};
const leave = () => {
  isHover.value = false;
};
</script>

<style scoped></style>
